import React, { Component } from 'react';
// import TabBar from '~/TabBar';
import style from './index.module.scss'
import { RightOutline } from 'antd-mobile-icons'
import { SwipeAction, Radio, Stepper, Toast } from 'antd-mobile'
import { getGoodsCartListApi, addGoodsToCartApi, subGoodsToCartApi, clearGoodsToCartApi } from '@/api/goodsCart'
import Footer from '../../components/Footer'
class index extends Component {

    state={
        list:[],
        isAllChecked:false,
        totalPrice:0
    }

    componentDidMount(){
        this.getGoodsCartList();
    }

    async getGoodsCartList(){
        let res = await getGoodsCartListApi({userid:sessionStorage.getItem("userid")});

        if(res.data.code===200){
            this.setState({
                list:res.data.list
            },()=>{
                this.totalPriceFn();
            })
        }
    }

   

    radioClick=(id)=>{
        // 、修改
        let arr = this.state.list.map(item=>{
            if(item.id===id){
                item.ischeck = !item.ischeck;
            }
            return item;
        })
        
        this.setState({
            list:arr,
            isAllChecked:this.state.list.every(item=>item.ischeck)
        })
        this.totalPriceFn();
    }

    allCheckedClick=()=>{
        this.setState({
            isAllChecked:!this.state.isAllChecked,
            list:this.state.list.map(item=>{
                item.ischeck = !this.state.isAllChecked;
                return item;
            })
        })
        this.totalPriceFn();
    }

    // 计算总价
    totalPriceFn=()=>{
        let money = 0;
        this.state.list.forEach(item=>{
            money += item.ischeck?(item.salesPrice.value*item.count):0
        })
        this.setState({
            totalPrice:money
        })
    }

    render() {
        return (
            <div className={style.cart}>
                <div className={style.cartTitle}>
                    购物车
                </div>
                <div className={style.coupon}>
                    <div className={style.clearCart} onClick={this.isClearShow}>清空购物车</div>
                    <span>满减￥200，享超值换购</span>
                    <p className={style.redSixe}><span>立即挑选</span><RightOutline /></p>
                </div>
                {/* 商品卡片区域*/}
                <div className={style.cartContent}>
                    {
                        this.state.list.map(item => (
                            <div key={item.id} className={style.cartCardBox}>
                                <SwipeAction
                                    rightActions={[
                                        {
                                            key: 'delete',
                                            text: '删除',
                                            color: 'danger',
                                        },
                                    ]}
                                >
                                    <>
                                        <div className={style.card} >
                                            <div className={style.redio}>
                                                <Radio checked={item.ischeck} onChange={this.changeCheck} onClick={()=>this.radioClick(item.id)} />
                                            </div>
                                            <div className={style.cardBox}>
                                                <img src={item.pic} alt="" />
                                                <div className={style.cardContent}>
                                                    <p className={style.cardContentTitle}>{item.name}</p>
                                                    <p>
                                                        <span className={style.cardContentSpan1}>满200减200</span>
                                                    </p>
                                                    <p>
                                                        <span className={style.cardContentSpan2}>￥{item.salesPrice.value}</span>
                                                    </p>
                                                    <div className={style.cardContentBox}>
                                                        <p>￥<span>{item.salesPrice.value}</span></p>
                                                        <div> <Stepper value={item.count} defaultValue={item.count} min={0} onChange={(value) => this.changeGoodsNum(value, item.count, item.id)} /></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </>
                                </SwipeAction>
                            </div>
                        ))

                    }
                </div>
                {/* 底部 */}
                <div className={style.submitBox}>
                    <Radio  checked={this.state.isAllChecked} onClick={this.allCheckedClick} />
                    <div className={style.subBoxContent}>
                        <p>总价：<span className={style.subBoxspan1}>￥</span><span className={style.subBoxspan2}>{this.state.totalPrice}</span></p>
                        <span className={style.subBoxbtn}>去结算({this.state.count})</span>
                    </div>
                </div>

                <div className={style.foot}>
                    <Footer></Footer>
                </div>
                {/* 遮罩层 */}
                {
                    this.state.isShow ? (
                        <div className={style.clearBox1} >
                            <div className={style.showClear}>
                                <p>是否清空购物车？</p>
                                <p className={style.showClearBtns}>
                                    <span onClick={this.clearCart}>确定</span>
                                    <span onClick={this.cancelClearCart}>取消</span>
                                </p>
                            </div>
                        </div>
                    ) : ''
                }

            </div>
        );
    }
}

export default index;